<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <!-- 标题内容 -->
    <title>欢迎来到北冥有鱼的Gitee空间</title>
    <!-- 引入外部CSS包，反正也要联网，不如从CDN引入 -->
    <link href="http://fonts.googleapis.com/css?family=Zhi+Mang+Xing" rel="stylesheet" type="text/css">
    <link href="https://cdn.bootcdn.net/ajax/libs/mdui/1.0.1/css/mdui.min.css" rel="stylesheet">
    <!-- 页面的CSS -->
    <style>
        * {
            --caption-size: 2vw;
        }

        @media (max-width: 1023px) {
            * {
                --caption-size: 4vw;
            }
        }

        .mdui-card-content {
            height: 72px;
        }
    </style>
</head>

<body class="mdui-theme-layout-auto mdui-theme-primary-indigo mdui-theme-accent-amber">
    <div class="mdui-appbar mdui-appbar-fixed mdui-shadow-0">
        <div class="mdui-toolbar mdui-color-theme">
            <a class="mdui-typo-title">
                北冥有鱼的Gitee空间
            </a>
            <div class="mdui-toolbar-spacer"></div>
        </div>
    </div>
    <div style="position: relative; width: 100%; height: 60vh;">
        <img src="./background.jpg" style="position: relative; width: 100%; height: 100%; object-fit: cover;">
        <div
            style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; text-align: center; color: white;">
            <div
                style="margin: 1rem 0; font-family: Zhi Mang Xing; font-size: calc(3 * var(--caption-size)); letter-spacing: .8rem;">
                <span style="white-space: nowrap;">北冥有鱼</span>
                <span style="white-space: nowrap;">其名为鲲</span>
            </div>
            <div style="margin: 1rem 0; font-size: var(--caption-size); font-weight: 300; letter-spacing: .25rem;">
                欢迎来到我的Gitee空间
            </div>
        </div>
    </div>
    <div class="mdui-container">
        <div class="mdui-row" style="margin: 2rem 0;">
            <div class="mdui-col-xs-12 mdui-col-sm-6 mdui-col-md-4">
                <div class="mdui-typo">
                    <h1 style="margin-top: 0;">应用导航</h1>
                </div>
            </div>
            <div class="mdui-col-xs-12 mdui-col-sm-6 mdui-col-md-8">
                <div class="mdui-textfield mdui-textfield-expandable mdui-float-right">
                    <button class="mdui-textfield-icon mdui-btn mdui-btn-icon" mdui-tooltip="{content: '搜索应用'}">
                        <i class="mdui-icon material-icons">search</i>
                    </button>
                    <input id="app-search" class="mdui-textfield-input" type="text" placeholder="搜索应用" />
                    <button class="mdui-textfield-close mdui-btn mdui-btn-icon" mdui-tooltip="{content: '关闭'}">
                        <i class="mdui-icon material-icons">close</i>
                    </button>
                </div>
            </div>
        </div>
        <div id="app-list" class="mdui-row-xs-1 mdui-row-sm-2 mdui-row-lg-3 mdui-grid-list"></div>
        <template id="app-item-template">
            <div class="mdui-col">
                <div class="mdui-card" style="margin: 1rem;">
                    <div class="mdui-card-header">
                        <img class="mdui-card-header-avatar" src="{{Icon}}" />
                        <div class="mdui-card-header-title">{{Title}}</div>
                        <div class="mdui-card-header-subtitle">{{Category}}</div>
                    </div>
                    <div class="mdui-card-content">
                        {{Description}}
                    </div>
                    <div class="mdui-card-actions">
                        {{#Buttons}}
                        <button class="mdui-btn mdui-ripple" onclick="{{OnClick}}">{{Title}}</button>
                        {{/Buttons}}
                    </div>
                </div>
            </div>
        </template>
    </div>
    <!-- 引入外部JS包，反正也要联网，不如从CDN引入 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/mdui/1.0.1/js/mdui.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/mustache.js/4.1.0/mustache.min.js"></script>
    <!-- 页面JS -->
    <script>
        //应用列表
        var apps = [
            {
                "Title": "浏览器主页",
                "Icon": "http://ericwang017.gitee.io/browserhome/favicon.ico",
                "Category": "实用工具",
                "Description": "浏览器主页（收藏夹和搜索页面）的一个平替。",
                "Buttons": [
                    {
                        "Title": "前往",
                        "OnClick": "window.location.href = 'http://ericwang017.gitee.io/browserhome/';"
                    }, {
                        "Title": "复制链接",
                        "OnClick": "navigator.clipboard.writeText('http://ericwang017.gitee.io/browserhome/'); mdui.snackbar({ message: '复制成功' });"
                    }
                ]
            }
        ];

        //关键组件
        var appListContainer = $('#app-list'), appItemTemplate = $('#app-item-template').html(), appSearchBar =
            $('#app-search');

        //展示列表
        function showList(search) {
            var result = [];
            if (search && search.length) {
                apps.forEach(function (app) {
                    if (app.Title.indexOf(search) < 0 && app.Category.indexOf(search) < 0 && app.Description.indexOf(search) < 0) return;
                    var temp = {};
                    $.extend(temp, app);
                    result.push(temp);
                });
            } else {
                $.extend(result, apps);
            }
            appListContainer.html('');
            result.forEach(function (item) {
                appListContainer.append(Mustache.render(appItemTemplate, item));
            });
        }

        $(function () {
            showList();
            appSearchBar.on('input propertychange', function () {
                showList(appSearchBar.val());
            });
        });
    </script>
</body>

</html>